<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">
<body>
<div class="layui-fluid">
    <div class="site-text" style="margin: 5%; display: none" id="window">
        <div class="layui-form" action="" lay-filter="addform">
            <div class="layui-form-item">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色描述</label>
                <div class="layui-input-block">
                    <input type="text" name="des" lay-verify="required" autocomplete="off" placeholder="请输入角色描述" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" hidden>
                <div class="layui-input-block">
                    <button id="addrolesubmit" class="layui-btn" lay-submit lay-filter="addRole">
                        保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form layui-row layui-col-space10"  style="margin: 5%; display: none" id="rolePerlist">
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">权限列表</div>
                <div class="layui-card-body">
                    <table id="table_demo" lay-filter="table_demo"></table>
                    <script type="text/html" id="table_toolbar">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm" lay-event="addrole">添加角色</button>
                        </div>
                    </script>
                    <script type="text/html" id="table_operate">
                        <a class="layui-btn layui-btn-xs" lay-event="per">权限</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
<!--                        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="user">用户</a>-->

                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['table','element','form'],function () {
        var table = layui.table
            ,element = layui.element
            ,form = layui.form;

        table.render({
            elem: '#table_demo'
            ,url: '/roleList'
            ,method : 'post'
            ,toolbar: '#table_toolbar'
            ,defaultToolbar: ['filter', 'print']
            ,cellMinWidth: 80
            ,page: true
            ,cols: [
                [
                {type:'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID',  sort: true, fixed: 'left'}
                ,{field: 'name', title: '角色名称'}
                ,{field: 'des', title: '角色描述'}
                ,{fixed: 'right', title:'操作', toolbar: '#table_operate', width:200}
                ]
            ]
        });


        table.on('toolbar(table_demo)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'addrole':
                    layer.open({
                        type: 1
                        ,skin: 'layui-layer-molv'
                        ,area: ['380px', '270px']
                        ,title: ['添加角色','font-size:18px']
                        ,btn: ['确定', '取消']
                        ,shadeClose: true
                        ,shade: 0 //遮罩透明度
                        ,maxmin: true //允许全屏最小化
                        ,content:$("#window")  //弹窗路径
                        ,success:function(layero,index){
                            form.render(null, 'addform');
                        }
                        ,yes : function(index, layero) { // 确认按钮回调函数

                            form.on('submit(addRole)', function(data) {
                                $.ajax({
                                    url:"/addRole",
                                    async: false,
                                    type:"POST",
                                    dataType: "text",
                                    data:data.field,
                                    success: function(aa){
                                        if(aa==="error"){
                                            layer.msg('添加失败！', {icon: 2});
                                            layer.close(index);
                                        }else if(aa==="success"){
                                            layer.msg('添加成功！', {icon: 1});
                                            location.reload()
                                        }
                                    }
                                });
                                return false;
                            });
                            $('#addrolesubmit').click();
                        }
                        ,btn2 : function(index, layero) { // 取消按钮回调函数
                            layer.close(index); // 关闭弹出层
                        }
                    });
                    break;
            }
    });

        table.on('tool(table_demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                if(data.name==="管理员"){
                    layer.msg('该角色无法删除！', {icon: 2});
                }else{
                    layer.confirm('确定删除该角色？删除后无法恢复', function(index){
                        $.ajax({
                            url:"/delRole",
                            async: false,
                            type:"POST",
                            dataType: "text",
                            data:{"id":data.id},
                            success: function(aa){
                                if(aa==="error"){
                                    layer.msg('删除失败！', {icon: 2});
                                    location.reload()

                                }else if(aa==="success"){
                                    layer.msg('删除成功！', {icon: 1});
                                    obj.del();
                                    layer.close(index);
                                }
                            }
                        });
                    });
                }

            } else if(obj.event === 'per'){
                $.ajax({
                    url:"/getrole2per",
                    async: false,
                    type:"POST",
                    dataType: "json",
                    data:{"id":data.id},
                    success: function(aa){
                        var res = aa.res;
                        $("#rolePerlist").empty();
                        for(var i=0;i<res.length;i++){
                            if(res[i]['ishave']==0){
                                $("#rolePerlist").append(' <div class="layui-col-md12">\n' +
                                    '<input type="checkbox" value="'+res[i]["id"]+'" title="'+res[i]["name"]+'" lay-filter="perid" lay-skin="primary"> </div>')
                            }else{
                                $("#rolePerlist").append(' <div class="layui-col-md12">\n' +
                                    '<input type="checkbox" value="'+res[i]["id"]+'" title="'+res[i]["name"]+'" lay-filter="perid" lay-skin="primary" checked> </div>')
                            }
                        }
                        form.render();
                        form.on('checkbox(perid)', function(oo){
                            var type = "";
                            if(oo.elem.checked===true){
                                type="add"
                            }else if(oo.elem.checked===false){
                                type="del"
                            }
                            $.ajax({
                                url:"/role2perManage",
                                async: false,
                                type:"POST",
                                dataType: "text",
                                data:{"roleid":data.id,"type":type,"perid":oo.value},
                                success: function(aa){
                                    if(aa==="error"){
                                        layer.msg('更改权限失败！', {icon: 2});
                                    }else if(aa==="success"){
                                        layer.msg('更改权限成功！', {icon: 1});
                                    }
                                }
                            });
                        });

                        layer.open({
                            type: 1
                            ,skin: 'layui-layer-molv'
                            ,area: ['380px', '270px']
                            ,title: ['管理角色','font-size:18px']
                            ,btn: ['取消']
                            ,shadeClose: true
                            ,shade: 0 //遮罩透明度
                            ,maxmin: true //允许全屏最小化
                            ,content:$("#rolePerlist")  //弹窗路径
                            ,btn1 : function(index, layero) { // 取消按钮回调函数
                                layer.close(index); // 关闭弹出层
                            }
                        });
                    }
                });
            }
        });
    })
</script>
</body>
</html>